<template>
  <div id="CompanyInfoRotation">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 1" :key="item">
        <div>
          <el-row>
            <el-col :span="6">
              <div class="img">
                <img src="../../assets/img/home/pic2.jpg"></br>
                <span class="comname"><b>{{companylist.company_name}}</b></span>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content bg-purple-light">
                <el-row>
                  <el-col :span="8">
                    <div class="col"><span class="caption">联系人：</span>{{companylist.contact_person}}</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="col"><span class="caption">联系电话：</span>{{companylist.tel}}</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="col"><span class="caption">公司固定电话：</span>{{companylist.desk_phone}}</div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <div class="col"><span class="caption">公司类型：</span>{{companylist.company_type}}</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="col"><span class="caption">所属行业：</span>{{companylist.industry_name}}</div>
                  </el-col>
                  <el-col :span="8" v-if="showInfo === 1">
                    <div class="col"><span class="caption">公司规模：</span>{{companylist.company_size}}</div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8" v-if="showInfo === 1">
                    <div class="col"><span class="caption">公司邮箱：</span>{{companylist.email}}</div>
                  </el-col>
                  <el-col :span="8" v-if="showInfo === 1">
                    <div class="col"><span class="caption">公司官网：</span>{{companylist.company_website}}</div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="col"><span class="caption">公司地址：</span>{{companylist.company_address}}</div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="cols"><span class="caption">公司简介：</span>{{companylist.company_profile}}</div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <el-row>
          <el-col :span="6">
            <div class="img">
              <img src="../../assets/img/home/pic2.jpg"></br>
              <span class="comname"><b>{{companylist.company_name}}</b></span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="table">
              <div class="publish">
                <h3>岗位发布列表</h3>
              </div>
              <el-table :data="joblist" border highlight-current-row fit style="top:10px;left:20px;width:90%;">
                <el-table-column type="index" :label="$t('index')" width="80" align="center"></el-table-column>
                <el-table-column prop="job_title" label="招聘职位" align="center"></el-table-column>
                <el-table-column prop="academic_requirements" label="学历要求" align="center"></el-table-column>
                <el-table-column prop="work_experience" label="工作经验要求" align="center"></el-table-column>
                <!-- <el-table-column prop="work_space" label="工作地点" align="center"></el-table-column> -->
                <el-table-column prop="salary" label="薪资待遇" align="center"></el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
      <el-carousel-item v-for="(item,index) in joblist" :key="index">
        <el-row>
          <el-col :span="6">
            <div class="img">
              <img src="../../assets/img/home/pic2.jpg"></br>
              <span class="comname"><b>{{companylist.company_name}}</b></span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="job">
              <el-row>
                <el-col :span="24">
                  <div class="head">
                    <i class="fa fa-briefcase icon-style" aria-hidden="true"></i>&nbsp;{{item.job_title}}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title">
                    <i class="fa fa-users icon-style" aria-hidden="true"></i>&nbsp;<span
                    class="conent-style">招聘人数:</span>{{item.recruits_count}}&nbsp;&nbsp;
                    <i class="fa fa-graduation-cap icon-style" aria-hidden="true"></i>&nbsp;<span class="conent-style">学历要求:</span>{{item.academic_requirements}}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title">
                    <i class="fa fa-handshake-o icon-style" aria-hidden="true"></i>&nbsp;<span class="conent-style">工作经验:</span>{{item.work_experience}}&nbsp;&nbsp;
                    <i class="fa fa-building-o icon-style" aria-hidden="true"></i>&nbsp;<span
                    class="conent-style">工作地点:</span>{{item.work_space}}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title">
                    <i class="fa fa-credit-card icon-style" aria-hidden="true"></i>&nbsp;<span class="conent-style">薪资待遇:</span>{{item.salary}}&nbsp;&nbsp;
                    <i class="fa fa-user-o icon-style" aria-hidden="true"></i>&nbsp;<span
                    class="conent-style">联系人:</span>{{item.contact_person}}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title">
                    <i class="fa fa-mobile icon-style" aria-hidden="true"></i>&nbsp;<span
                    class="conent-style">联系电话:</span>{{item.tel}}&nbsp;&nbsp;
                    <i class="fa fa-volume-control-phone icon-style" aria-hidden="true"></i>&nbsp;<span
                    class="conent-style">固定电话:</span>{{item.fixed_tel}}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title" v-html="item.position_description">
                    <i class="fa fa-envelope-open-o icon-style" aria-hidden="true"></i>&nbsp;<span class="conent-style">{{item.position_description || '未填写'}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { commonNotify, changeSalaryStyle } from '../../assets/js/common.js'

  export default {
    data () {
      return {
        companylist: [],
        joblist: [],
        value: 1,
        jobdata: [],
        showInfo: 1,
        programId: ''
      }
    },
    created () {
      this.programId = this.$route.params.id
      this.getCompamyInfo()
      this.getJobList()
    },
    methods: {
      getCompamyInfo () {
        let _this = this
        let params = new Object()
        postDataToServer('COMPANY_GET', params).then((data) => {
          if (data.status === 0) {
            _this.companylist = data.data_list
            if (_this.companylist.company_size === null) {
              _this.showInfo = 0
            }

            if (_this.companylist.email === null) {
              _this.showInfo = 0
            }

            if (_this.companylist.company_website === null) {
              _this.showInfo = 0
            }

            this.changeType()
          }
        })
      },
      getJobList () {
        let _this = this
        let params = new Object()
        params.program_id = _this.programId
        postDataToServer('COMPANY_PROGRAM_LISTALL', params).then((data) => {
          if (data.status === 0) {
            data.data_list.forEach((item) => {
              _this.changeJonbType(item)
              item = changeSalaryStyle(item)
              _this.joblist.push(item)
            })
          }
        })
      },
      changeJonbType (obj) {
        obj.academic_requirements = getStaticMapList('academic_requirements', obj.academic_requirements)
        obj.work_experience = getStaticMapList('work_experience', obj.work_experience)
      },
      changeType () {
        let _this = this
        _this.companylist.company_type = getStaticMapList('company_type', _this.companylist.company_type)
        _this.companylist.company_size = getStaticMapList('company_size', _this.companylist.company_size)
        _this.companylist.member_type = getStaticMapList('member_type', _this.companylist.member_type)
      }
    }
  }
</script>
<style scoped>
  #CompanyInfoRotation {
    padding: 2em;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #F9FAFC;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #F9FAFC;
  }

  img {
    height: 12em;
    width: 12em;
    border-radius: 6em;
  }

  .col {
    padding-top: 25px;
  }

  .bg-purple-light {
    padding-left: 15px;
  }

  .cols {
    padding-top: 25px;
    padding-right: 20px;
  }

  .img {
    padding-top: 15px;
    text-align: center;
    font-size: 20px;
  }

  .publish {
    text-align: center;
    padding-top: 20px;
  }

  .job {
    padding: 1.5em;
  }

  .title {
    font-size: 1em;
    text-align: left;
    padding-top: 12px;
  }

  .head {
    font-size: 1.5em;
    text-align: left;
    font-weight: bold;
  }

  .caption {
    font-weight: bold;
  }

  .icon-style {
    color: #20A0FF;
  }

  .conent-style {
    font-weight: bold;
  }
</style>
